<template>
  <div class="c_taskAdd" v-transfer-dom>

    <popup v-model="showValue" position="bottom">
      <swiper id="taskAdd_s" ref="swp" v-model="addIndex" @on-index-change="saveIndex" :show-dots="true" :auto="false" :duration="500" :show-desc-mask="false" height="320px">
        <swiper-item>
          <group @click.native="onGroupTitle" :title="titleStr">

            <audio controls autoplay style="display:none"></audio>
            <x-textarea style="border: 2px dotted #dddd; margin: 10px 12px 12px;font-size: 16px;border-radius: 8px;" v-model="taskTitle" readonly placeholder="'明天21点10分做xxx事'，会自动设置闹钟。长按麦克风,创建语音任务.最长60秒." :show-counter="false" :rows="3"></x-textarea>
            <box gap="10px 13px">
              <x-progress :percent="percentSound" :show-cancel="false"></x-progress>
            </box>
            <div class="rtime">{{ audioCurr.duration }}</div>
            <div class="rprogress" style="margin-bottom: 47px;" @touchstart='switch_way_say(true,$event)' @touchend='switch_way_say(false)' @touchmove='switch_say_cancel($event)'>
              <div class="rschedule" v-bind:class="{ 'recordRun': mp3State== 0 }"></div>
            </div>
          </group>
        </swiper-item>
        <swiper-item>
          <group @click.native="onGroupTitle" :title="titleStr">
            <x-input v-model="taskTitle" required title="标题" placeholder="必填"></x-input>
            <x-textarea v-model="taskDesc" title="描述" placeholder="详细信息[可选]" :show-counter="false" :rows="3"></x-textarea>
            <datetime v-model="dueValue" clear-text="清空" @on-clear="clearDue" format="YYYY-MM-DD HH:mm" :minute-list="['00','05','10', '15','20','25', '30','35','40','45','50','55']" @on-change="changeDue" title="开始闹铃"></datetime>
          </group>
          <div v-if="!invip" class="flagshow" @click="doTagChange">
            <div style="display:flex;">
              <span style="color: #10aeff;">标签</span>
              <span v-if="flagUse.length==0">点击添加</span>
              <span ref="flags" v-for="(it, index) in flagUse" :key="index" :value="it">{{it.name}}</span>
            </div>
          </div>
      <!-- <div class='hScroll'>
            <checker class='hScrollCon' v-model="flagUse" default-item-class="demo1-item" type="checkbox" :max="8" selected-item-class="demo1-item-selected">
                <checker-item :class="{'disabled':it.key==''}" :disabled="it.key==''" :value="it" v-for="(it, index) in flagUseArr" :key="index">{{it.name}}</checker-item>
            </checker>
        </div>
        <div v-if="!invip" class='hScroll'>
            <checker class='hScrollCon' v-model="flagNeed" default-item-class="demo1-item" type="checkbox" :max="1" selected-item-class="demo1-item-selected">
                <checker-item :class="{'disabled':it==''}" :disabled="it==''" :value="it" v-for="(it, index) in flagNeedArr" :key="index">{{it?it:"评估:"}}</checker-item>
            </checker>
        </div>
        <div v-if="!invip && (!ext||!ext.tags||!ext.tags.due)" class='hScroll'>
            <checker class='hScrollCon' v-model="flagDue" default-item-class="demo1-item" type="checkbox" :max="1" selected-item-class="demo1-item-selected">
                <checker-item :class="{'disabled':it==''}" :disabled="it==''" :value="it" v-for="(it, index) in flagDueArr" :key="index">{{it?(it.substr(5)):"计划:"}}</checker-item>
            </checker>
        </div>
        <div v-if="!invip && (!ext||!ext.pid)" class='hScroll'>
            <checker class='hScrollCon' v-model="projectUse" default-item-class="demo1-item" type="checkbox" :max="1" selected-item-class="demo1-item-selected">
                <checker-item :class="{'disabled':it.id==''}" :disabled="it.id==''" :value="it" v-for="(it, index) in projectsArr" :key="index">{{it.title.substr(0,4)}}</checker-item>
            </checker>
        </div>

        <checker v-if="invip" class="checkScroll" v-model="flagUse" default-item-class="demo1-item" type="checkbox" :max="8" selected-item-class="demo1-item-selected">
            <checker-item :class="{'disabled':it.key==''}" :disabled="it.key==''" v-for="(it, index) in tagsAll" :key="index" :value="it">{{it.name}}</checker-item>
        </checker> -->
      <divider v-if="type=='habit'">设置顺序</divider>
      <div v-if="type=='habit'" class='hScroll'>
        <checker class='hScrollCon' v-model="habitSlt" default-item-class="demo1-item" disabled-item-class="habit-disabled" type="checkbox" :max="1" selected-item-class="demo1-item-selected">
          <checker-item @on-item-click="posChange(it,index)" :disabled="it.id==0" :value="it" v-for="(it, index) in habitArr" :key="'h'+index">{{it.title}}</checker-item>
        </checker>
      </div>
      <!-- <divider v-if="appMode==1">设置日期</divider>
        <div v-if="appMode==1" class='hScroll'>
            <checker class='hScrollCon' v-model="daySlt" default-item-class="demo1-item" disabled-item-class="habit-disabled" type="checkbox" :max="1" selected-item-class="demo1-item-selected">
                <checker-item :value="it" v-for="(it, index) in dayArr" :key="'d'+index">{{it.title}}</checker-item>
            </checker>
        </div> -->
      <box gap="10px 10px">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" :show-loading="addloading" @click.native="onTaskAdd">添加</x-button>
          </flexbox-item>
          <flexbox-item>
            <x-button type="warn" @click.native="doTaskCancle">取消</x-button>
          </flexbox-item>
          <!-- <flexbox-item>
                  <x-button v-if="!invip" type="primary" @click.native="invip=true">VIP</x-button>
                  <x-button v-if="invip" type="primary" @click.native="invip=false">普通</x-button>
                </flexbox-item> -->
        </flexbox>
      </box>
      <flags ref="flag" v-on:flaghide="onflagHide" v-on:ext="onFlagExt" :show.sync="showAddTag" :ext.sync="ext"></flags>
      <!--输入语音的时候显示的canvas的动画模块-->
        </swiper-item>
      </swiper>


    </popup>
    <!--tips-->
    <div class="recording" v-show="state_say">
      <div class="recording-voice" v-show='!say_cancel&&state_say'>
        <div class="voice-inner">
          <div class="voice-icon"></div>
          <div class="voice-volume">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <p>手指上划,取消发送</p>
      </div>
      <div class="recording-cancel" v-show='say_cancel&&state_say'>
        <div class="cancel-inner"></div>
        <p>松开手指,取消发送</p>
      </div>
    </div>
  </div>

</template>
<script>
  import moment from "moment";

  import { taskAndTag } from "./mixin";
  import { logic } from "./mixinTaskLogic";
  import { sound } from "./mixinSound";

  import Flags from "./task/Flags.vue"
  // import Flags from "./Flags.vue"
  var nextIndex,cansave; //swipe切换动画用  
  import api from '../api';
  import {mapState,mapActions} from 'vuex'

  import {
    TransferDomDirective as TransferDom,
    PopupPicker,XButton,Group,Cell,Popup,Checker,CheckerItem,Divider,Box,XInput,XTextarea,Flexbox,FlexboxItem,Datetime,ButtonTab,ButtonTabItem,Swiper,SwiperItem,XProgress,
  } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      PopupPicker,Flags,XButton,Group,Cell,Popup,Checker,CheckerItem,Divider,Box,XInput,XTextarea,Flexbox,FlexboxItem,Datetime,ButtonTab,ButtonTabItem,Swiper,SwiperItem,XProgress,
    },
    props: {
      show: Boolean,
      ext: Object,
      // type:String,
      exts: Array,
    },
    mixins: [taskAndTag, logic, sound],
    computed: {
      "tagsAll": function () {
        var temp = [{ key: "", name: "所有标签:" }];
        var filtersFlag = ['created', 'cancelled', 'need', 'done', 'toggle', 'due', 'started', 'to', 'help', 'repeat', 'used', "wakeup", "getup", "wash1 ", "bath", "wc", "breakfast", "tape", "study", "gowork", "workStart", "workReady", "health", "lunch", "cartoon", "dinner", "workEnd", "gohome", "wash2", "sleep", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
        var len = this.tagitems.length;
        for (var i = 0; i <= len - 1; i++) {
          var item = this.tagitems[i];
          if (filtersFlag.indexOf(item.key) != -1) {
            continue;
          }
          temp.push({ key: item.key, name: item.name });
        }
        return temp;
      },
      "projectsArr": function () {
        var temp = [{ id: "", title: "项目:" }];
        return temp.concat(this.projects);
      },
      ...mapState({
        uid: state => state.vux.uid,
        phone: state => state.vux.phone,
        username: state => state.vux.username,
        tagDic: state => state.z39.tagDic,
        tagitems: state => state.z39.tagitems,
        tagitemDic: state => state.z39.tagitemDic,
        projects: state => state.z39.projects,
        remindMode: state => state.z39.remindMode,
        currMembers: state => state.z43.currMembers,
      })
    },
    watch: {
      "tagitems": function () {
        var temp = [];
        var len = this.tagitems.length;
        for (var i = 0; i <= len - 1; i++) {
          var item = this.tagitems[i];
          temp.push({ key: item.key, name: item.name });
        }
        this.flagAllArr = temp;
      },
      ext(val) {
        this.chagneTitleStr();
        // console.log("extStr",this.extStr);
      },
      exts(vals) {
        this.extsArr = this.exts;
        this.resetExts();
      },
      show(val) {
        console.log("show:", this.show, val)
        this.showValue = val;
        if (!val) {
          this.extOnce=null;
          this.chagneTitleStr();
          return;
        } 
        cansave = true ;
        if(this.addIndex !=nextIndex) setTimeout(()=>{this.addIndex = nextIndex ;},100)
        let page = this.ext && this.ext.pid?"project":(this.ext && this.ext.tags && this.ext.tags.due?"today":"todo");
        this.tongji("task","taskadd",page,"show");
        this.resetTitleStr();
        this.resetAll(true);
        this.getTagsrec({ignore:1}).then(data => {
          if (data.errno) return; //this.$vux.toast.show({text: data.errmsg ,type: 'warn'})
          //data = data.data;
          var flags = [].concat(data);
          flags.unshift({ key: "", name: "常用:" });
          this.flagUseArr = flags;
        })
      },
      showValue(val) {
        this.$emit('toVisible', val);
      }

    },
    activated() {},
    created() {
      var day, tomorrow;
      var temp = [""];
      var temps = [];
      var today = moment();
      this.today = moment().format("YYYY-MM-DD");
      tomorrow = moment().add(1, "d").format("YYYY-MM-DD");
      // day = today.add(1,"d").format("YYYY-MM-DD") ;
      // temp.push(day);
      for (var i = 0; i <= 30; i++) {
        day = moment().add(i, "d").format("YYYY-MM-DD");
        temp.push(day);
        if (i < 10) temps.push({ day: day, title: day == this.today ? "今天" : (day == tomorrow ? "明天" : day.substr(5)) });
      }
      this.flagDueArr = temp;
      temps.unshift({ day: "", title: "待办" });
      this.dayArr = temps;
      this.daySlt = [temps[1]];
      this.$vux && this.$vux.bus && this.$vux.bus.$on('taskAddExts', this.doExts)
      this.$vux && this.$vux.bus && this.$vux.bus.$on('taskAddExtOnce', this.extOnceVal)

      if (window.__wxjs_environment === 'miniprogram') try { getjssdk(true) } catch (e) {}
      let addIndex = localStorage.getItem("addIndex");
      if(addIndex!=undefined) {
        var v = parseInt(addIndex) ;
        this.addIndex = v==0?1:0;
        nextIndex=v;
      }
      else this.addIndex = 1,nextIndex=0 ; //
    },
    deactivated: function () {
      this.type = '';
    },
    mounted: function () {
      const uuid = Math.random().toString(36).substring(3, 8);
      this.$el.setAttribute('id', `taskadd-${uuid}`);
    },
    methods: {
      switch_way(way) {
        //say,txt
        console.log(way)

      },
      switch_way_say(boo, e) {
        this.state_say = boo;
        let _this = this;
        if (this.state_say) { //开始录音
          this.say_cancel = false;
          this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
          this.onStart();
        } else { //结束录音
          console.log(this.say_cancel)
          if (this.say_cancel) this.onCancle(); //松开取消发送
          else this.onStop(); //停止录音并保存          
        }
      },
      switch_say_cancel(e) {
        //判断是否为上滑
        var disY = e.changedTouches[0].pageY - this.vueTouches.y;
        if (disY < -10) {
          this.say_cancel = true;
        } else {
          this.say_cancel = false;
        }
      },
      stopRecording() {
        clearTimeout(this.recordTime);
        this.recorder.stop();
        this.audioCurr.end = moment().format('HH:mm:ss');
        this.playProgress = JSON.stringify(this.percentSound);
        console.log(this.playProgress)
      },
      playRecording() {
        this.audioCurr = { start: moment().format('HH:mm:ss'), duration: '00:00' };
        this.audioCurr.title = '录音 ' + moment().format('MM-DD HH:mm');
        this.startTime = moment().valueOf();
        this.percentSound = 0;
        let audio = document.querySelector('audio');
        this.recorder.play(audio);
        // this.mp3State = 0;
        // this.getvideoprogress();
      },

      doExts(val) {
        this.extsArr = val;
        this.resetExts();
        //console.log("exts change:",this.extsArr);
      },
      getInitData() {
        if (_.isEmpty(this.tagitemDic) && this.uid > 0) {
          this.tagitemsGet();
        }
        // this.initPage();
      },
      initPage() {

      },
      getTagExt(){
        let tags = {};
        if (this.type != "habit") tags = { created: moment().format('YYYY-MM-DD HH:mm') };
        let ext = {};
        if (this.state == "open") {
          this.extOnce&&this.extOnce.tags&&Object.assign(tags, this.extOnce.tags );
          this.ext&&this.ext.tags&&Object.assign(tags, this.ext.tags);
        }
        // this.flagUse.map(item=>{
        //     var key =  item.key ; //item.value ||
        //     if(key !=undefined) tags[key] = "";
        // })
        // if(this.flagNeed.length>0) tags.need = this.flagNeed[0];
        // if(this.flagDue.length>0) tags.due = this.flagDue[0];
        if (this.dueValue) tags.due = this.dueValue;
        return tags ;
      },
      onTaskAdd() {
        if (this.taskTitle == "") return this.$vux.toast.show({ text: "请填内容", type: 'warn' });
        let data = { title: this.taskTitle };
        data.desc = this.taskDesc || "";
        if (this.state == "open") {
          var once= this.extOnce?this.extOnce:{};
          let ext = Object.assign({}, this.ext,once);
          data = Object.assign(data, ext);
        }
        let tags = this.getTagExt();
        // if(this.projectUse.length>0) data.pid = this.projectUse[0].id;
        let sdata = data;
        if (this.addloading) return this.$vux.toast.text("数据请求中,网络缓慢请稍等");
        // this.$store.commit('updateLoadingStatus', { isLoading: true });
        // this.addloading = true ;
        this.taskAdd(sdata, tags).then(data => {
          this.resetAll(); // this.addloading = false ; 在resetall中有.
          if (data.id && tags.repeat && tags.life == undefined) {
            var value = tags.repeat;
            this.repeatAdd({ taskid: data.id, rule: value, time_rule: this.today }, true);
          }
          if(tags.due) this.$vux.bus.$emit('addTodayNum', null);
          if (tags.due && tags.due.length > 15) {
            this.setDueClock(data, tags.due);
            if (!this.phone) {
			  this.$vux.bus.$emit('taskAddVisible', false);
              this.go("bind");
              this.$vux.toast.show({ text: "绑定后闹钟生效", type: 'warn' });
            }
          }
          if (data.id && this.type == 'habit') {
            this.habitArr.map(item => {
              if (!item.id) {
                item.id = data.id;
                item.title = sdata.title;
              }
            })
            // this.$emit('exts',{arr:this.habitArr,task:data}) ; 
            this.$vux.bus.$emit('habitsChange', { arr: this.habitArr, task: data });
          }
        });
      },
      resetExts(index) {
        var arr = this.extsArr;
        if (this.type != 'habit' || !arr || arr.length == 0) return;
        index = index || this.habitPos;
        index = Math.max(0, index);
        var item = { title: "位置", id: 0 };
        let news = [].concat(arr);
        var pos = this.habitPos <= index ? index : index + 1;
        news.splice(pos, 0, item);
        this.habitPos = index;
        if (index == 0) this.habitSlt = [news[1]]; // item; //
        this.habitArr = news;
        console.log("habitArr:", this.habitSlt, this.extsArr);
      },
      resetAll(clear) {
        this.addloading = false;
        this.resetInput();
        this.$refs.flag.doClear();
        this.flagDue = [];
        this.flagNeed = [];
        this.projectUse = [];
        this.dueValue = "";
        // vip模式不需要清楚标签选中.
        if (clear || !this.invip) this.flagUse = [];
      },
      doTaskCancle() {
        this.showValue = false;
      },
      resetInput() {
        this.taskTitle = "";
        this.taskDesc = "";
        this.dueValue = "";
      },
      onflagHide: function (val) {
        this.showAddTag = val;
      },
      onFlagExt: function (val) {
        var tags = val.tags;
        var temp = [];
        var filtersFlag = ["created", "started", "need", "done", "toggle", "cancelled", "due", "used", "usedCalc", "to", "repeat", "critical"];
        for (var key in tags) {
          if (filtersFlag.indexOf(key) == -1) {
            temp.push({ key: key, name: this.tagitemDic[key] });
          }
        }
        this.flagUse = temp;
        // console.log("onFlagExt:",val);
      },
      doTagChange() {
        this.showAddTag = true;
      },
      onTab(value) {
        this.flagCml = value;
        console.log("click", value);
      },
      posChange(item, index) {
        if (item.id == 0) return;
        this.resetExts(index - 1); //放到选中按钮的前面
        this.habitSlt = [item];
        console.log("pos:", index, item, this.habitSlt);
      },
      changeDue(value) {
        var now = moment().format("YYYY-MM-DD HH:mm");
        if (this.dueValue && this.dueValue < now) this.$vux.toast.show({ text: "时间已过", type: 'warn' });
      },
      resetTitleStr() {
        var res = '新建任务  ' + (this.extStr ? ('(' + this.extStr + ')') : '') + (this.invip ? '【标签持续选中状态】' : ''); //<a>任务箱<a>
        if ((this.ext.tags && this.ext.tags.life == undefined) && (this.ext.state || this.ext.tags)) {
          if (this.state == "open") res += ' <a class="titleBtn titleClose">清空<a>';
          else if (this.state == "close") res = '新建任务  <a class="titleBtn titleOpen">恢复<a>';
        }
        this.titleStr = res;
        // return res ;
      },
      onGroupTitle(evt) {
        var tar = evt.target;
        if (tar.className.indexOf("titleBtn") == -1) return;
        this.state = tar.className.indexOf("titleClose") == -1 ? "open" : "close";
        this.resetTitleStr();
        console.log("onGroupTitle", tar, tar.className, this.state);
      },
      clearDue(value) {
        this.dueValue = "";
      },
      saveIndex(val){
        if(!cansave) return ;
        localStorage.setItem("addIndex",val);
        nextIndex = val ;
        console.log("save index",val);
      },
      extOnceVal(val){
        this.extOnce = val ;
        this.chagneTitleStr();
      },
      chagneTitleStr(){
        var temp = "";
        var name;
        if (this.ext && this.ext.tags && this.ext.tags.life != undefined) { //taskAdd放到app.vue中后,判断type
          this.type = 'habit';
        } else {
          this.type = '';
        }
        if (this.ext && this.ext.uid) {
          if (this.ext.uid == this.uid) {
            name = this.username;
          } else {
            var item;
            for (var i = this.currMembers.length - 1; i >= 0; i--) {
              item = this.currMembers[i];
              if (this.ext.uid == item.fuid) {
                name = item.name || item.username;
                break;
              }
            };
          }
          temp += "成员:" + name;
        }
        if (this.ext && this.ext.tags) {
          var once= this.extOnce&&this.extOnce.tags?this.extOnce.tags:{};
          var tags = Object.assign({}, this.ext.tags, once );
          if (tags.due) {
            temp += (temp ? " " : "") + "日期:" + tags.due.substr(5);
            delete tags.due;
          }
          var tagArr = [];
          for (var key in tags) {
            name = this.tagitemDic[key];
            if (name != undefined) tagArr.push(name);
          }
          if (tagArr.length > 0) temp += "标签:" + tagArr.join(" ");
          console.log("tagArr:", tagArr, tags);
        }
        if (this.ext && this.ext.pid) {
          var item;
          for (var i = this.projects.length - 1; i >= 0; i--) {
            item = this.projects[i];
            if (item.id == this.ext.pid) {
              temp += (temp ? " " : "") + "项目:" + item.title.substr(0, 4);
              break;
            }
          };
        }
        if (temp) temp = "添加" + temp;
        this.extStr = temp;
      },
    },
    data() {
      return {
        showValue: false,
        state: "open",
        type: "",
        titleStr: "", //group.title
        taskTitle: "",
        taskDesc: "",
        smyTitle: "",
        smydesc: "",
        smydesc1: "",
        smydesc2: "",
        smydesc3: "",
        smydesc4: "",
        smydesc5: "",
        showAddTag: false,
        habitArr: [],
        habitSlt: [],
        dayArr: [],
        daySlt: [],
        habitPos: 0,
        extStr: "",
        today: "",
        flagUse: [], //[{name: "评估",key:"need"}]
        flagUseArr: [],
        flagNeed: [],
        flagNeedArr: ["", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45"],
        flagDue: [],
        flagDueArr: [],
        projectUse: [],
        showAddTag: false,
        flagCml: "",
        invip: false,
        extsArr: [],
        dueValue: "",
        addloading: false,
        recordTime: null,
        percentSound: 100,
        playProgress: -1,
        isInApp: false, //保持isApp变量,用户v-if使用,怕使用isApp出错.
        playType: 1, // 1 app插件播放 2、浏览器h5播放.
        hasInit: false,
        wxIntId: -1,
        audioCurr: {
          duration: '00:59'
        }, //当前录音的文件信息
        startTime: 0,
        mp3State: -1,
        recorder: {},
        mp3title: "",
        durationWX: '',
        playerShow: false,
        actionWeekEndArr: [],
        audioArr: [],
        mp3EditCurr: null,
        editTitleShow: false,
        vueTouches: {},
        state_say: false, //'chat-say_touched'
        say_cancel: false,
        addIndex:1,
        extOnce:null, //一次性扩展标签
      }
    }
  }
</script>
<style>
#taskAdd_s  .vux-indicator-right {bottom:0}
</style>
<style scoped>

  .checkScroll {
    max-height: 200px;
    overflow: scroll;
  }

  .rtime {
    font-size: 22px;
    color: #10aeff;
    text-align: center;
    margin-bottom: 7px
  }

  .demo1-item {
    border: 1px solid #027ab7;
    border-radius: 4px;
    padding: 0 6px 4px 4px;
    margin: 1px 2px;
    padding: 0 4px;
    line-height: 31px;
    height: 31px;
    width: auto;
    text-align: center;
    font-size: 12px;
    /*min-width: 34px;*/
  }

  .habit-disabled {
    border: 1px dashed #000000;
    background-color: #68c8fa;
  }

  .demo1-item-selected {
    border: 1px solid #8e8e8e;
    background-color: #10aeff;
  }

  .customChe {
    border: 1px solid #b2b2b2;
    background-color: #ffffff;
    width: 40px;
    text-align: center;
  }

  .hScroll {
    overflow: scroll;
    white-space: nowrap;
  }

  .hScrollCon {
    display: flex;
  }

  .c_taskAdd .disabled {
    color: #10aeff;
    border: 0;
  }

  .c_taskAdd .vux-tab {
    padding: 2px 6px;
    height: 32px;
  }

  .c_taskAdd .vux-tab .vux-tab-item {
    background: #fff;
    line-height: 28px;
    font-size: 16px;
  }

  .c_taskAdd .vux-tab .vux-tab-selected {
    background: rgba(0, 169, 255, 0.24);
    border-radius: 6px;
  }

  .c_taskAdd .vux-tab .vux-tab-disabled {
    color: #10aeff;
  }

  .rprogress {
    width: 80px;
    height: 80px;
    margin: 12px auto 2px;
    background: url(../../static/z39h5/img/arecord.png) no-repeat center center;
    background-size: 32px 32px;
  }

  .rschedule {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .recordRun {
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .schedule {
    width: 8px;
    height: 8px;
    margin: 1px 0;
    background-color: #FFCC33;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
  }

  /*tips*/

  .recording {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .5);
    color: #ffffff;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    z-index: 10000;
  }

  .recording-voice {}

  .recording-voice .voice-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
  }

  .voice-inner .voice-icon {
    width: 55px;
    height: 90px;
    background: url(../../static/z39h5/images/recording-bkg.png) no-repeat center center;
    background-size: contain;
  }

  .voice-inner .voice-volume {
    width: 30px;
    height: 55px;
  }

  .voice-inner .voice-volume span {
    display: block;
    height: 2px;
    margin-top: 4px;
    min-width: 8px;
    float: left;
    clear: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2000ms;
    background-color: #e4e4e5;
    /* opacity: 0 ; */
  }

  .voice-inner .voice-volume span:nth-child(1) {
    width: 24px;
    visibility: hidden;
  }

  .voice-inner .voice-volume span:nth-child(2) {
    width: 22px;
  }

  .voice-inner .voice-volume span:nth-child(3) {
    width: 20px;
  }

  .voice-inner .voice-volume span:nth-child(4) {
    width: 18px;
  }

  .voice-inner .voice-volume span:nth-child(5) {
    width: 16px;
  }

  .voice-inner .voice-volume span:nth-child(6) {
    width: 14px;
  }

  .voice-inner .voice-volume span:nth-child(7) {
    width: 12px;
  }

  .voice-inner .voice-volume span:nth-child(8) {
    width: 10px;
  }

  .voice-inner .voice-volume span:nth-child(9) {
    width: 8px;
  }

  /**/

  .recording-cancel {}

  .recording-cancel p {
    border-radius: 3px;
    background-color: #9d383e;
  }

  .cancel-inner {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    background-image: url(../../static/z39h5/images/record-cancel.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
</style>